<template>
  <div v-if="showPage" class="taskDetail">
    <TaskDetail :data="formModel" :show-form="showForm"></TaskDetail>
    <TaskHandle
      v-if="userType === 'dispatch'"
      :item="formModel.order_details"
      @on-handle-success="handleSuccess"
    ></TaskHandle>

    <TaskHandleDriver
      v-if="userType === 'driver'"
      :item="formModel.order_details"
      @on-handle-success="handleSuccess"
    ></TaskHandleDriver>
  </div>
</template>

<script lang="ts" setup>
  import { useUserStore } from '@/store/index';
  import TaskHandle from '@/views/role/dispatch/allTask/TaskHandle/index.vue';
  import TaskHandleDriver from '@/views/role/driver/allTask/TaskHandle/index.vue';
  import TaskDetail from './components/TaskDetail/index.vue';
  import useTaskDetail from './components/TaskDetail/useTaskDetail';

  const { formModel, showPage, showForm, getDetail } = useTaskDetail();

  const userStore = useUserStore();
  const { userType } = userStore;
  getDetail();

  const handleSuccess = () => {
    window.history.go(-1);
  };
</script>

<style lang="less" scoped>
  .taskDetail {
    padding-bottom: 40px;
  }
</style>
